<template>
  <div class="material_reivew">
    <div class="material_reivew_top">
      <div class="material_reivew_top_left">材料审查</div>
      <div class="material_reivew_top_right cursor_pointer" v-if="isShowTypical">
        <img class="material_reivew_top_right_img" src="@/assets/images/home/star.png" alt="" />
        <div class="material_reivew_top_right_text" @click="showTypicalCase">查看典型案例</div>
        <a-button style="margin-left: 30px" size="small" type="primary" @click="typicalCaseAdd">
          {{ currentTypicalCase ? '编辑当前案件' : '收藏当前案件' }}</a-button
        >
        <a-button
          v-show="!taskFormShow"
          style="margin-left: 30px"
          size="small"
          type="primary"
          @click="showTaskFormShow"
        >
          显示申请表</a-button
        >
        <a-button v-show="!ocrViewShow" style="margin-left: 30px" size="small" type="primary" @click="ocrFile()">
          识别当前文件</a-button
        >
      </div>
      <div class="material_reivew_top_return">
        <!-- <page-header-wrapper :title="false"></page-header-wrapper> -->
        <img class="cursor_pointer" src="@/assets/images/accept/back-button.png" alt="返回按钮" @click="handleBack" />
      </div>
    </div>
    <a-spin :spinning="spinning">
      <div class="material_reivew_center">
        <div
          class="material_reivew_center_left_list"
          v-if="isShowFile"
          :class="{ material_reivew_center_left_list_autosize: !isShowPreview }"
        >
          <a-collapse
            ref="materilaCollapseRef"
            :accordion="true"
            v-model="activeKey"
            v-for="(item, index) in materialList"
            :key="index"
            @change="clickPanel"
          >
            <a-collapse-panel :key="item.id" :show-arrow="false">
              <div slot="header" class="beyond_hiding">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span> {{ index + 1 + '、' + item.name }} </span>
                  </template>
                  {{ item.name }}
                </a-tooltip>
              </div>
              <div v-if="item.fileList && item.fileList.length > 0">
                <div v-for="(file, fileIndex) in item.fileList" :key="fileIndex">
                  <div class="beyond_hiding">
                    <a-tooltip placement="topLeft">
                      <template slot="title">
                        <span> {{ fileIndex + 1 + '.' + file.name }} </span>
                      </template>
                      <a
                        type="link"
                        :class="
                          selectedFile && selectedFile.id == file.id
                            ? 'material_reivew_center_left_list_a_active'
                            : 'material_reivew_center_left_list_a'
                        "
                        @click="selectFile(file)"
                      >{{ fileIndex + 1 + '.' + file.name }}</a
                      >
                    </a-tooltip>
                  </div>
                </div>
              </div>
              <div v-else>
                <span>暂无数据</span>
              </div>
            </a-collapse-panel>
          </a-collapse>
        </div>

        <div class="material_reivew_center_right">
          <!-- <splitpanes class="default-theme" @resize="resize" @resized="resized"> -->
          <!-- <pane min-size="0" size="40"> -->
          <div class="material_reivew_center_right_pdf" v-if="isShowFile && isShowPreview">
            <img
              @click="changeFile(-1)"
              class="cursor_pointer material_reivew_center_right_pdf_img_left"
              src="@/assets/images/home/toleft.png"
              alt=""
            />
            <iframe
              id="myDiv"
              allowTransparency="true"
              class="material_reivew_center_right_pdf_content"
              :src="fileUrl"
              frameborder="0"
            />
            <img
              @click="changeFile(+1)"
              class="cursor_pointer material_reivew_center_right_pdf_img_right"
              src="@/assets/images/home/toright.png"
              alt=""
            />

            <!-- 可拖动对比表单 -->
            <MoveModal
              width="50%"
              title="申请表"
              :visible="taskFormShow"
              @ok="taskFormShow = false"
              @cancel="taskFormShow = false"
            >
              <TaskFormView
                class="material_reivew_center_right_pdf_content"
                style="width: 100%; height: 90vh; overflow: auto"
                :pattern="Number($route.params.pattern)"
              />
            </MoveModal>
            <MoveModal
              width="45%"
              title="Ocr文字识别"
              :visible="ocrViewShow"
              @ok="ocrViewShow = false"
              @cancel="ocrViewShow = false"
            >
              <div style="max-height: 40vh; overflow-y: auto">
                <!-- 新增：固定高度且带有滚动条的容器 -->
                {{ ocrText }}
                <!-- 文字内容 -->
              </div>
            </MoveModal>
            <div
              :class="isExpand ? 'material_reivew_center_right_expand' : 'material_reivew_center_right_expand_active'"
            ></div>
            <div
              :class="isExpand ? 'material_reivew_center_right_button' : 'material_reivew_center_right_button_auto'"
              class="cursor_pointer"
              @click="hiddenPreview"
            >
              <div class="material_reivew_center_right_button_text">{{ isExpand ? '收起' : '展开' }}</div>
              <div
                :class="
                  isExpand
                    ? 'material_reivew_center_right_button_triangle_right'
                    : 'material_reivew_center_right_button_triangle_left'
                "
              ></div>
            </div>
          </div>
          <!-- </pane> -->
          <!-- <pane min-size="30" size="30"> -->
          <div
            class="material_reivew_center_right_content"
            :class="[
              { material_reivew_center_right_content_hidding: !isExpand && isShowPreview },
              { material_reivew_center_right_content_padding: !isShowFile || !isShowPreview },
            ]"
          >
            <div
              v-if="!isShowDocDetail"
              :class="[{ material_reivew_center_right_content_smallDiv: !isShowFile || !isShowPreview }]"
            >
              <div class="material_reivew_center_right_content_one">
                <img class="material_reivew_center_right_content_one_img" src="@/assets/images/home/legel.png" alt="" />
                <div class="material_reivew_center_right_content_one_text">法律法视库</div>
              </div>
              <div class="material_reivew_center_right_content_two">
                <a-input v-model="searchForm.keyWord" class="material_reivew_center_right_content_two_inp"></a-input>
                <img
                  class="material_reivew_center_right_content_two_img cursor_pointer"
                  @click="searchLaw"
                  src="@/assets/images/home/search.png"
                  alt=""
                />
                <a-popover title="高级检索" trigger="click" placement="bottomRight">
                  <div :style="{ width: popoverWidth }" slot="content">
                    <a-form-model id="searchFormDiv" ref="searchFormRef" :model="searchForm">
                      <a-form-model-item label="检索范围">
                        <a-radio-group v-model="searchForm.searchType">
                          <a-radio :value="0"> 标题 </a-radio>
                          <a-radio :value="1"> 正文 </a-radio>
                          <a-radio :value="2"> 标题 + 正文 </a-radio>
                        </a-radio-group>
                      </a-form-model-item>
                      <a-form-model-item label="施行日期">
                        <a-date-picker
                          v-model="searchForm.pubStartDate"
                          :style="{ width: 'calc(40% - 12px)' }"
                          placeholder="开始日期"
                          format="YYYY-MM-DD"
                          allowClear
                        />
                        ~
                        <a-date-picker
                          v-model="searchForm.pubEndDate"
                          :style="{ width: 'calc(40% - 12px)' }"
                          placeholder="结束日期"
                          format="YYYY-MM-DD"
                          allowClear
                        />
                      </a-form-model-item>

                      <a-form-model-item label="公布日期">
                        <a-date-picker
                          v-model="searchForm.execStartDate"
                          :style="{ width: 'calc(40% - 12px)' }"
                          placeholder="开始日期"
                          format="YYYY-MM-DD"
                          allowClear
                        />
                        ~
                        <a-date-picker
                          v-model="searchForm.execEndDate"
                          :style="{ width: 'calc(40% - 12px)' }"
                          placeholder="结束日期"
                          format="YYYY-MM-DD"
                          allowClear
                        />
                      </a-form-model-item>
                    </a-form-model>
                  </div>
                  <a-button
                    @click="popoverClick"
                    class="material_reivew_center_right_content_two_button"
                    type="primary"
                  >
                    高级检索
                  </a-button>
                </a-popover>
              </div>
              <div class="material_reivew_center_right_content_three">
                <div
                  :class="
                    item.flag
                      ? 'material_reivew_center_right_content_three_itema'
                      : 'material_reivew_center_right_content_three_item'
                  "
                  v-for="(item, index) in Tp_lawList"
                  :key="index"
                  @click="selectLawType(item.id)"
                >
                  {{ item.description }}
                </div>
              </div>

              <div class="material_reivew_center_right_content_four">
                <SubmitLawInfo
                  :style="{ width: tableWidth }"
                  @showDocDetali="showDocDetali"
                  ref="submitLawInfoRef"
                  :searchForm="searchForm"
                ></SubmitLawInfo>
              </div>
            </div>
            <div class="material_reivew_center_right_content_one" v-else>
              <submitLawInfoDetail
                :style="{ width: tableWidth }"
                @closeShowDocDetail="closeShowDocDetail"
                ref="submitLawInfoDetailRef"
                :docInfo="docInfo"
                :keyWord="searchForm.keyWord"
              ></submitLawInfoDetail>
            </div>
          </div>
          <!-- </pane>
          </splitpanes> -->
        </div>
      </div>
    </a-spin>
    <!-- 典型案件收藏 -->
    <TypicalCaseAdd ref="typicalCaseAddRef" :applyid="applyid" :typicalCase="currentTypicalCase"></TypicalCaseAdd>
    <!-- 典型案件查询 -->
    <TypicalCaseView ref="typicalCaseViewRef" :applyid="applyid" @reloadRouter="reloadRouter"></TypicalCaseView>
  </div>
</template>

<script>
import { ocrByAttachmentid } from '@/api/ocr/ocr'
import { SplitpaneMixin } from './SplitpaneMixin'
import { kkfilePreview } from '@/utils/util'
import { queryMatterAttachList } from '@/api/apply/apl_matter_attach'
import { queryEnumerationValuesByName } from '@/api/base/enumeration'
import { getTypicalDataByUserId } from '@/api/accept/apl_typicial.js'
import storage from 'store'
import { APP_USER } from '@/store/mutation-types.js'
export default {
  name: 'SubmitMaterialReview',
  // 当前页面注入路由重加载
  inject: ['reload'],
  mixins: [SplitpaneMixin],
  props: {
    applyid: {
      // 申请id
      type: String,
      required: true
    },
    selectData: {
      // 选择数据
      type: Object,
      required: false,
      default: () => {}
    },
    isShowTypical: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data () {
    return {
      spinning: false,
      materialList: [], // 材料list
      activeKey: '0', // 面板id
      selectedFile: {}, // 选择的文件,
      ocrText: {}, // ocr识别文本
      // ocrText: '这是文字识别的内容，',
      selectedItem: {}, // 选择的文件项
      fileUrl: '', // 文件地址
      isExpand: false, // 是否展开文件预览 false是收起 true是展开
      isShowPreview: true, // 是否展示预览
      isShowFile: true, // 是否展示文件项
      Tp_lawList: [], // 法律法规类型
      popoverWidth: 0, // 展开宽度
      tableWidth: 0, // 表格宽度
      tableWidthClone: 0, // 表格宽度
      taskFormShow: false, // 是否展示表单
      ocrViewShow: false, // 是否展示文字是被结果
      // 屏幕宽度
      screenWidth: window.innerWidth,
      // 屏幕高度
      screenHeight: window.innerHeight,

      // 法律条文查询条件：
      searchForm: {
        searchType: 0, // 查询条件 0: 标题查询 1：文本查询 2： 标题-文本查询
        lawType: undefined, // 法律类型
        keyWord: '', // 查询文本
        pubStartDate: '', // 发布开始时间
        pubEndDate: '', // 发布结束时间
        execStartDate: '', // 施行开始时间
        execEndDate: '', // 施行结束时间
        pageNumber: 1,
        pageSize: 20,
        sort: 'pubdate',
        order: 'desc'
      },
      // 是否查询出来的法律条文展示细节
      isShowDocDetail: false,
      docInfo: {}, // 选中的文档数据
      currentUser: storage.get(APP_USER), // 登录人信息
      currentTypicalCase: undefined // 当前的典型案例
    }
  },
  components: {
    SubmitLawInfo: () => import('@/views/materials/SubmitLawInfo.vue'),
    submitLawInfoDetail: () => import('@/views/materials/submitLawInfoDetail.vue'),
    TypicalCaseAdd: () => import('@/views/materials/TypicalCaseAdd.vue'),
    TypicalCaseView: () => import('@/views/materials/TypicalCaseView.vue'),
    TaskFormView: () => import('@/views/workflow/Wf_TaskForm.vue'),
    MoveModal: () => import('@/components/Power/MoveModal.vue')
  },
  computed: {},
  created () {
    this.init()
  },
  mounted () {},
  destroyed () {},
  watch: {
    selectedFile: {
      // value 需要深度监听及默认先执行handler函数
      handler (val) {
        if (val && val.url) {
          this.isShowPreview = true
          this.fileUrl = kkfilePreview(val.url)
        } else {
          this.isShowPreview = false
        }
        // this.initTableWidth()
        this.resizeTableWidth()
      },
      immediate: true,
      deep: true
    }
  },
  mounted () {},
  methods: {
    async init () {
      this.spinning = true
      // 查询当前数据
      this.queryTypicalDataByUserId()
      // 查询法律类型枚举值
      this.findEnumByName({ enumName: 'Tp_law' }, () => {
        if (this.Tp_lawList && this.Tp_lawList.length > 0) {
          this.Tp_lawList.forEach((element) => {
            // element.flag = false
            this.$set(element, 'flag', false)
          })
          // 默认选中第一个
          this.selectLawType(this.Tp_lawList[0].id)
        }
      })
      const res = await queryMatterAttachList({ applyid: this.applyid })
      let findKey = ''
      if (res.data && res.data.length > 0) {
        this.isShowFile = true
        this.materialList = res.data
        if (this.materialList && this.materialList.length > 0) {
          findKey = this.materialList[0].id
          if (this.selectData) {
            // this.selectedFile = this.selectData
            for (let index = 0; index < this.materialList.length; index++) {
              const material = this.materialList[index]
              if (material && material.fileList && material.fileList.length > 0) {
                for (const file of material.fileList) {
                  if (file.id == this.selectData.id) {
                    this.selectedFile = file
                    findKey = this.materialList[index].id
                  }
                }
              }
            }
          } else {
            for (let index = 0; index < this.materialList.length; index++) {
              const material = this.materialList[index]
              if (material && material.fileList && material.fileList.length > 0) {
                this.selectedFile = material.fileList[0]
                break
              }
            }
          }
        }
      } else {
        this.isShowFile = false
      }
      this.spinning = false
      setTimeout(() => {
        if (!this.selectedFile) {
          this.clickPanel(findKey)
        } else {
          this.activeKey = findKey
        }
        // this.initTableWidth()
      }, 0.25)
    },

    async ocrFile () {
      const fileID = this.selectedFile.attachmentid
      const res = await ocrByAttachmentid(fileID)
      if (res.code == 0) {
        console.log('ocr文本识别：', this.ocrText)
        this.ocrText = res.data
        this.showOcrViewShow()
      }
    },
    // 当前的面板点击
    clickPanel (key) {
      this.activeKey = key
      // 默认选中当前的第一条数据
      if (this.materialList && this.materialList.length > 0) {
        const material = this.materialList.filter((element) => element.id == key)[0]
        if (material) {
          this.selectedItem = material
          if (material && material.fileList && material.fileList.length > 0) {
            this.selectedFile = material.fileList[0]
          } else {
            this.selectedFile = undefined
          }
        }
      }
    },
    // 选择文件
    selectFile (file) {
      this.selectedFile = file
    },
    // 隐藏收起当前预览
    hiddenPreview () {
      this.isExpand = !this.isExpand
      // 如果展开则记录当前的宽度
      if (this.isExpand) {
        this.initTableWidth()
      }
      // 触发当前表格的宽带变化
      this.$nextTick(() => {
        this.resizeTableWidth()
      })
    },

    // 设置当前的法律表格的宽度
    initTableWidth () {
      this.$nextTick(() => {
        const el = document.getElementsByClassName('material_reivew_center_right_content_four')
        if (el && el[0]) {
          this.tableWidth = el[0].offsetWidth + 'px'
          this.tableWidthClone = this.tableWidth
        }
      })
    },
    resizeTableWidth () {
      // 当前为文件展示并且 展开
      if (this.isShowPreview && this.isExpand) {
        this.tableWidth = this.tableWidthClone
      } else {
        this.$nextTick(() => {
          const el = document.getElementsByClassName('material_reivew_center_right_content_four')
          if (el && el[0]) {
            this.tableWidth = el[0].offsetWidth + 'px'
          }
          setTimeout(() => {
            if (this.$refs.submitLawInfoRef) {
              this.$refs.submitLawInfoRef.queryDocList()
            }
          }, 0.25)
        })
      }
    },
    // 查找法律类型的枚举
    findEnumByName (val, callBack) {
      const parameter = [val]
      parameter.forEach((item) => {
        queryEnumerationValuesByName({ enName: item.enumName }).then((res) => {
          console.log('query' + item.enumName, res.data)
          this[`${item.enumName}List`] = res.data
          console.log(this[`${item.enumName}List`])
          if (callBack instanceof Function) {
            callBack()
          }
        })
      })
    },
    selectLawType (id) {
      for (let index = 0; index < this.Tp_lawList.length; index++) {
        if (this.Tp_lawList[index].id == id) {
          this.$set(this.Tp_lawList[index], 'flag', true)
          this.searchForm.lawType = this.Tp_lawList[index].id
        } else {
          this.$set(this.Tp_lawList[index], 'flag', false)
        }
      }
      // 触发查询更新
      this.$nextTick(() => {
        if (this.$refs.submitLawInfoRef) {
          this.$refs.submitLawInfoRef.queryDocList()
        }
      })
    },
    searchLaw () {
      // 触发查询更新
      this.$nextTick(() => {
        if (this.$refs.submitLawInfoRef) {
          this.$refs.submitLawInfoRef.queryDocList()
        }
      })
    },

    changeFile (change) {
      // 判断当前是否有文件
      if (this.selectedItem && this.selectedItem.fileList && this.selectedItem.fileList.length > 0) {
        // 查找当前的选择的文件是哪一个
        const fileList = this.selectedItem.fileList
        let selectIndex = 0
        for (let index = 0; index < fileList.length; index++) {
          if (this.selectedFile.id == fileList[index].id) {
            selectIndex = index
          }
        }
        if (selectIndex >= 0) {
          if (change > 0) {
            if (fileList.length > selectIndex + change) {
              this.selectedFile = this.selectedItem.fileList[selectIndex + change]
            } else {
              this.$message.warn('当前是该文件类型下的最后一个文件')
            }
          } else {
            if (selectIndex + change >= 0) {
              this.selectedFile = this.selectedItem.fileList[selectIndex + change]
            } else {
              this.$message.warn('当前是该文件类型下的第一个文件')
            }
          }
        }
      } else {
        this.$message.warn('当前文件项没有文件可选择')
      }
    },
    popoverClick () {
      const el = document.getElementsByClassName('material_reivew_center_right_content')
      if (el && el[0]) {
        this.popoverWidth = el[0].offsetWidth + 'px'
      }
    },

    handleBack () {
      this.$emit('onClose')
    },

    // 展示法律条文
    showDocDetali (record) {
      this.docInfo = record
      this.isShowDocDetail = true
    },
    // 隐藏法律条文展示
    closeShowDocDetail () {
      this.isShowDocDetail = false
      this.$nextTick(() => {
        if (this.$refs.submitLawInfoRef) {
          this.$refs.submitLawInfoRef.queryDocList()
        }
      })
    },
    showOcrViewShow () {
      this.ocrViewShow = true
    },
    showTaskFormShow () {
      this.taskFormShow = true
      // if (this.taskFormShow) {
      //   this.isShowPreview = true
      //   // this.isExpand = true
      // } else {
      //   if (this.selectedFile && this.selectedFile.url) {
      //     this.isShowPreview = true
      //   } else {
      //     this.isShowPreview = false
      //   }
      // }
      // // 触发当前表格的宽带变化
      // this.$nextTick(() => {
      //   this.resizeTableWidth()
      // })
    },

    // 通过userId查询典型案例数据
    async queryTypicalDataByUserId () {
      const res = await getTypicalDataByUserId({ applyid: this.applyid, userId: this.currentUser.userId })
      if (res.code != 0) {
        console.log('查询当前典型案例失败')
      } else {
        this.currentTypicalCase = res.data
      }
    },

    // 典型案件收藏
    typicalCaseAdd () {
      this.$refs.typicalCaseAddRef.init()
    },
    // 典型案件查看
    showTypicalCase () {
      this.$refs.typicalCaseViewRef.init()
    },
    reloadRouter (param) {
      this.$router.replace(
        {
          // 默认4 查看模式
          query: {
            path: `/AppeptExamineProcessedOperation/${param.taskid}/4`,
            url: '/AppeptExamineProcessed',
            queryParam: param
          }
        },
        () => {
          this.reload()
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .ant-pro-page-header-wrap-page-header-warp {
  margin-top: 24px;
}
.material_reivew {
  background: #f8fafd;

  &_top {
    display: flex;
    flex-direction: row;
    align-items: center;

    &_left {
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 800;
      color: #2c2c2c;
      padding-left: 16px;
    }

    &_right {
      display: flex;
      align-items: center;
      margin-left: 109px;

      &_img {
        height: 24px;
        width: 24px;
      }

      &_text {
        margin-left: 10px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 800;
        text-decoration: underline;
        color: #0072c6;
      }
    }

    &_return {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: auto;
    }
  }

  &_center {
    display: flex;
    flex-direction: row;
    margin-top: 27px;

    &_left_list {
      display: flex;
      flex-direction: column;
      min-width: 300px;

      &_autosize {
        min-width: 300px;
      }
      &_itema {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #dce9f5;
        border-left: 3px solid #0072c6;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #0072c6;
        padding: 33px 40px;
        white-space: nowrap;
      }

      &_item {
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
        border-bottom: 1px solid #efefef;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #2c2c2c;
        padding: 33px 40px;
        white-space: nowrap;
      }

      &_a {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #2c2c2c;
      }

      &_a_active {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #0072c6;
      }

      ::v-deep .ant-collapse-header {
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
        border-bottom: 1px solid #efefef;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #2c2c2c;
        padding: 24px 24px;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
      }
      ::v-deep .ant-collapse-item-active {
        // background: #dce9f5;
        border-left: 3px solid #0072c6;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #0072c6;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;

        .ant-collapse-header {
          background: #dce9f5;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 800;
          color: #0072c6;
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: block;
        }
      }
    }

    &_right {
      display: flex;
      flex-direction: row;
      height: 90vh;
      width: 100%;
      border: 1px solid #efefef;
      border-radius: 0px 10px 10px 10px;
      // justify-content: space-between;
      justify-content: space-around;
      margin-left: 10px;

      &_pdf {
        // flex: 0.499;
        display: flex;
        // flex-direction: row;
        // justify-content: space-around;
        background: #ffffff;
        align-items: center;
        // width: 60%;
        height: 100%;
        flex: 1.2;

        &_content {
          // height: 950px;
          // width: 700px;
          width: 100%;
          height: 100%;
          min-height: 700px;
        }

        &_img_left {
          height: 32px;
          width: 19px;
          margin-left: 10px;
          margin-right: 10px;
        }

        &_img_right {
          height: 32px;
          width: 19px;
          margin-left: 10px;
          margin-right: 0px;
        }
      }

      &_expand {
        width: 2px;
        height: 100%;
        border: 2px solid #efefef;
        margin-left: 10px;
      }
      &_expand_active {
        width: 2px;
        height: 100%;
        border: 2px solid #0072c6;
        margin-left: 10px;
      }

      &_button {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 32px;
        height: 116px;
        background: #0072c6;
        border-radius: 0px 20px 20px 0px;
        font-size: 16px;
        font-family: 'PingFang-SC-Heavy';
        font-weight: 500;
        color: #ffffff;
        position: relative;
        // margin-left: 16px;
        // margin-right: 16px;
        // left: 10px;

        &_auto {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: 32px;
          height: 116px;
          background: #0072c6;
          border-radius: 0px 20px 20px 0px;
          font-size: 16px;
          font-family: 'PingFang-SC-Heavy';
          font-weight: 500;
          color: #ffffff;
          position: relative;
          margin-left: 16px;
          margin-right: 16px;
          margin-left: 0px;
        }

        &_text {
          writing-mode: vertical-rl;
          padding-right: 5px;
        }

        &_triangle_left {
          width: 0;
          height: 0;
          border-width: 8px;
          border-style: dotted;
          border-color: transparent #ffffff transparent transparent;
          text-align: center;
          margin-top: 10px;
          margin-right: 10px;
        }

        &_triangle_right {
          width: 0;
          height: 0;
          border-width: 8px;
          border-style: dotted;
          border-color: transparent transparent transparent #ffffff;
          text-align: center;
          margin-top: 10px;
          margin-left: 10px;
        }
      }

      &_content {
        // flex: 0.499;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        padding: 24px 0px 24px 12px;
        // padding-left: 36px;
        // width: 40%;
        flex: 1;

        &_hidding {
          flex: 0;
          display: none;
        }

        &_padding {
          padding: 24px 16px;
        }

        &_smallDiv {
          width: 97%;
        }

        &_button {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: 32px;
          height: 116px;
          background: #0072c6;
          border-radius: 0px 20px 20px 0px;
          font-size: 16px;
          font-family: 'PingFang-SC-Heavy';
          font-weight: 500;
          color: #ffffff;
          position: relative;
          left: -36px;
          top: 42%;

          &_text {
            writing-mode: vertical-rl;
            padding-right: 5px;
          }

          &_triangle_left {
            width: 0;
            height: 0;
            border-width: 8px;
            border-style: dotted;
            border-color: transparent #ffffff transparent transparent;
            text-align: center;
            margin-top: 10px;
            margin-right: 10px;
          }

          &_triangle_right {
            width: 0;
            height: 0;
            border-width: 8px;
            border-style: dotted;
            border-color: transparent transparent transparent #ffffff;
            text-align: center;
            margin-top: 10px;
            margin-left: 10px;
          }
        }

        &_one {
          display: flex;
          align-items: center;
          flex-direction: row;

          &_img {
            height: 20px;
            width: 20px;
          }

          &_text {
            margin-left: 15px;
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 800;
            color: #2c2c2c;
          }
        }

        &_two {
          margin-top: 48px;
          border: 2px solid #eef0fb;
          display: flex;
          flex-direction: row;
          width: 100%;
          height: 57px;
          align-items: center;
          justify-content: space-between;

          &_inp {
            border: none !important;
            // width: 70%;
            height: 100%;
            font-size: 20px;
          }

          &_img {
            // width: 10%;
            height: 40px;
            width: 40px;
            margin-top: 10px;
            margin-left: 20px;
            margin-right: 20px;
          }

          &_button {
            height: 100%;
            width: 200px;
          }
        }

        &_three {
          margin-top: 56px;
          display: flex;
          flex-direction: row;
          border-bottom: 2px solid #efefef;
          width: 100%;
          justify-content: space-between;
          padding: 0px 10px 20px 10px;

          &_itema {
            background: #f2f3f8;
            border-radius: 19px;
            padding: 9px 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 800;
            color: #0072c6;
          }

          &_item {
            padding: 9px 18px;
            border-radius: 19px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
          }
        }

        &_four {
          padding: 12px 12px;
          // display: flex;
          // flex-direction: column;
          width: 100%;
          &_item {
            margin-bottom: 48px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #2c2c2c;
          }
        }
      }
    }
  }
}
</style>
